<template>
  <div class="mod-user">
    <div class="search-bar">
      <el-form
        @submit.native.prevent
        :inline="true"
        class="search-form"
        ref="searchForm"
        :model="searchForm"
        size="small"
        label-width="80px"
      >
        <div class="input-row">
          <el-form-item prop="name" label="姓名:">
            <el-input
              v-model="searchForm.name"
              type="text"
              clearable
              placeholder="请输入骑手姓名"
            ></el-input>
          </el-form-item>
          <el-form-item prop="phone" label="手机号:">
            <el-input
              v-model="searchForm.phone"
              onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
              type="tel"
              clearable
              maxlength="11"
              :placeholder="$t('publics.mobilePhone')"
            ></el-input>
          </el-form-item>

          <el-form-item prop="idCard" label="身份证号:">
            <el-input
              v-model="searchForm.idCard"
              type="text"
              clearable
              maxlength="18"
              placeholder="请输入身份证号"
            ></el-input>
          </el-form-item>

          <el-form-item
            v-if="tabPosition == 'rider'"
            prop="status"
            :label="$t('publics.status') + ':'"
          >
            <el-select
              v-model="searchForm.status"
              clearable
              :placeholder="$t('publics.status')"
            >
              <el-option
                v-for="item in status"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item
            prop="status"
            :label="$t('brand.blockListStatus') + ':'"
          >
            <el-select
              v-model="searchForm.blacklist"
              clearable
              :placeholder="$t('brand.blockListStatus')"
            >
              <el-option
                v-for="item in blackListstatus"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="创建时间:">
            <el-date-picker
              size="small"
              v-model="timer"
              type="datetimerange"
              :range-separator="$t('date.tip')"
              value-format="yyyy-MM-dd HH:mm:ss"
              :start-placeholder="$t('text.startTime')"
              :end-placeholder="$t('date.end')"
              :default-time="['00:00:00', '23:59:59']"
              @change="createTimeChange"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <div class="default-btn primary-btn" @click="searchChange(true)">
              {{ $t("crud.searchBtn") }}
            </div>
            <div class="default-btn" @click="resetForm('searchForm')">
              {{ $t("product.reset") }}
            </div>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <el-radio-group v-model="tabPosition" style="margin-bottom: 20px">
      <el-radio-button label="rider">骑手列表</el-radio-button>
      <el-radio-button label="black">黑名单列表</el-radio-button>
    </el-radio-group>
    <div class="main-container">
      <div class="operation-bar">
        <div class="primary-btn default-btn" @click="addOrUpdateHandle()">
          新增
        </div>
        <div class="primary-btn default-btn" @click="distributionSetup">
          配送设置
        </div>
      </div>
      <div class="table-con">
        <div v-if="dataList.length === 0" class="empty-text">
          {{ $t("user.noData") }}
        </div>
        <el-table
          :data="dataList"
          header-cell-class-name="table-header"
          row-class-name="table-row-low"
          style="width: 100%"
        >
          <el-table-column
            fixed
            type="index"
            label="编号"
            prop="index"
            align="center"
            width="60"
          />
          <el-table-column fixed label="姓名" prop="name" align="center" />
          <el-table-column label="性别" prop="sex" align="center" width="120">
            <template slot-scope="scope">
              {{ scope.row.sex }}
            </template>
          </el-table-column>
          <!-- <el-table-column
            prop="pic"
            label="骑手头像"
          >
            <template slot-scope="scope">
              <div class="table-cell-image">
                <img
                  src="~@/assets/img/userImg.jpg"
                  v-if="!scope.row.pic"
                  width="130px"
                />
                <img :src="scope.row.pic" v-else />
              </div>
            </template>
          </el-table-column> -->
          <el-table-column prop="phone" align="center" label="手机号" />
          <el-table-column
            prop="validStr"
            width="160"
            align="center"
            label="通行证有效期是否到期"
          >
            <template slot-scope="{ row }">
              <span> {{ row.validStr || "--" }} </span>
            </template>
          </el-table-column>
          <el-table-column prop="status" align="center" label="当前状态">
            <template slot-scope="scope">
              <div class="dot-status">
                <div :class="['dot', scope.row.status ? 'dot1' : 'dot0']"></div>
                {{ scope.row.status === 0 ? "未到岗" : "在岗" }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            width="180"
            label="创建时间"
            align="center"
          >
            <template slot-scope="scope">
              <span> {{ scope.row.createTime }} </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            width="180"
            label="审核时间"
            align="center"
          >
            <template slot-scope="scope">
              <span> {{ scope.row.auditTime }} </span>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            align="center"
            :label="$t('crud.menu')"
            width="300"
          >
            <template slot-scope="scope">
              <div class="text-btn-con">
                <div
                  class="default-btn text-btn"
                  @click.stop="viewInfo(scope.row.id)"
                >
                  查看
                </div>

                <div
                  class="text-btn default-btn"
                  @click.stop="addOrUpdateHandle(scope.row.id)"
                >
                  编辑
                </div>
                <!-- blacklist黑名单 -->
                <div
                  v-if="!scope.row.blacklist"
                  class="text-btn default-btn black"
                  @click.stop="putinBlacklist(scope.row.id, true)"
                >
                  列入黑名单
                </div>
                <div
                  v-if="scope.row.blacklist"
                  class="text-btn default-btn black"
                  @click.stop="putinBlacklist(scope.row.id, false)"
                >
                  移出黑名单
                </div>
                <div
                  v-if="!scope.row.tfLeaving"
                  class="default-btn text-btn dimission"
                  @click.stop="dimission(scope.row.id, true)"
                >
                  离职
                </div>
                <div
                  v-if="scope.row.tfLeaving && !scope.row.blacklist"
                  class="default-btn text-btn"
                  @click.stop="dimission(scope.row.id, false)"
                >
                  复职
                </div>
                <div
                  class="default-btn text-btn"
                  @click.stop="openUpdatePassword(scope.row.id)"
                >
                  修改密码
                </div>
              </div>
            </template>
          </el-table-column>
          <div slot="empty">&nbsp;</div>
        </el-table>
      </div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="page.pageSize"
        :total="page.total"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>
    </div>
    <AddOrUpdate ref="AddOrUpdate" @refresh="getDataList(page)" />
    <InfoEcho ref="InfoEcho" />
    <DeliveryTime ref="DeliveryTime" />
    <UpdatePassword ref="UpdatePassword" />
  </div>
</template>

<script>
  import AddOrUpdate from "./AddOrUpdate";
  import InfoEcho from "./InfoEcho";
  import DeliveryTime from "./DeliveryTime";
  import UpdatePassword from "./UpdatePassword";
  export default {
    components: {
      AddOrUpdate,
      InfoEcho,
      DeliveryTime,
      UpdatePassword,
    },
    data() {
      return {
        tabPosition: "rider",
        theData: null, // 保存上次点击查询的请求条件
        dataList: [],
        timer: [], // 注册时间范围
        resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10, // 每页显示多少条
        },
        searchForm: {
          blacklist:0
        },
        status: [
          {
            label: "未到岗",
            value: 0,
          },
          {
            label: "在岗",
            value: 1,
          },
        ],
        blackListstatus: [
          {
            label: "正常",
            value: 0,
          },
          {
            label: "黑名单",
            value: 1,
          },
        ],
      };
    },
    watch: {
      // 监听 tabPosition 的 set
      tabPosition: {
        handler(val) {
          console.log('tabPosition',this.tabPosition);
          if(this.tabPosition == 'rider'){
            this.searchForm.blacklist = 0;
          }else{
            this.searchForm.blacklist = 1;
            this.searchForm.status = "";
          }
          this.searchChange(true)
        },
      },
    },
    mounted() {
      this.getDataList(this.page);
      this.getUnreviewCount();
    },
    methods: {
      getUnreviewCount() {
        this.$http({
          url: this.$http.adornUrl(`/platform/rider/audit-num`),
          method: "get",
        }).then(({ data }) => {
          console.log(data);
          const liEl = document.querySelector(
            '[data-routepath="TakeOutRider/approveQualification/index"]'
          );
          const supEl = liEl.querySelector("sup");
          supEl.innerHTML = data;
        });
        setTimeout(() => {
          this.getUnreviewCount();
        }, 10000);
      },
      // 黑名单
      putinBlacklist(id, flag) {
        this.$confirm(
          `确认要将该骑手 [${flag ? "列入黑名单" : "移出黑名单"}]吗？`,
          "提示",
          {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type: "warning",
            showCancelButton: true,
          }
        ).then(() => {
          this.$http({
            url: this.$http.adornUrl(
              "/platform/rider/blacklist?id=" + id + "&flag=" + flag
            ),
            method: "get",
          }).then(({ code }) => {
            if (code === "00000") {
              this.$message({
                message: "操作成功",
                type: "success",
              });
              this.getDataList(this.page);
            }
          });
        });
      },
      // 离职
      dimission(id, flag) {
        this.$confirm(`确认执行 [${flag ? "离职" : "复职"}] 操作？`, "提示", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning",
          showCancelButton: true,
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl(
              "/platform/rider/diss?id=" + id + "&flag=" + flag
            ),
            method: "get",
          }).then(({ code }) => {
            if (code === "00000") {
              this.$message({
                message: "操作成功",
                type: "success",
              });
              this.getDataList(this.page);
            }
          });
        });
      },
      // 查看
      viewInfo(id) {
        this.$refs.InfoEcho.open(id);
      },
      // 新增 / 修改 骑手
      addOrUpdateHandle(id) {
        this.$refs.AddOrUpdate.open(id);
      },
      // 配送设置
      distributionSetup() {
        this.$refs.DeliveryTime.open();
      },
      openUpdatePassword(id) {
        this.$refs.UpdatePassword.open(id);
      },
      /**
       * 获取骑手资质审批列表
       */
      getDataList(page, newData = false) {
        if (newData || !this.theData) {
          this.theData = JSON.parse(JSON.stringify(this.searchForm));
        }
        this.$http({
          url: this.$http.adornUrl("/platform/rider/page"),
          method: "post",
          params: {
            current: page == null ? this.page.currentPage : page.currentPage,
            size: page == null ? this.page.pageSize : page.pageSize,
          },
          data: this.$http.adornParams(Object.assign(this.theData)),
        }).then(({ data }) => {
          this.dataList = data.records;
          this.page.total = data.total;
        });
      },

      // 条件查询 JSON.stringify(arr)
      searchChange(newData = false) {
        this.page.currentPage = 1;
        this.getDataList(this.page, newData);
      },
      handleSizeChange(val) {
        this.page.pageSize = val;
        this.getDataList(this.page);
      },
      handleCurrentChange(val) {
        this.page.currentPage = val;
        this.getDataList(this.page);
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.searchForm = {
            blacklist:this.searchForm.blacklist
        }
        this.$forceUpdate();
        this.timer = [];
      },
      createTimeChange() {
        // 处理 searchForm 和 endTime
        if (!this.timer || this.timer.length === 0) {
          delete this.searchForm.startTime;
          delete this.searchForm.endTime;
        } else {
          this.searchForm.startTime = this.timer[0];
          this.searchForm.endTime = this.timer[1];
        }
      },
    },
  };
</script>
<style lang="scss" scoped>
  .mod-user {
    .tips .text {
      color: #ff0000;
    }
    ::v-deep .el-table__fixed {
      height: auto !important;
      bottom: 16px !important;
      &::before {
        background-color: transparent !important;
      }
    }
    ::v-deep .el-table__fixed-right {
      height: auto !important;
      bottom: 16px !important;
      &::before {
        background-color: transparent !important;
      }
    }
  }
  .TagS {
    margin-right: 10px !important;
  }

  .table-con {
    position: relative;
  }

  .empty-text {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 50%;
    color: #909399;
  }
  ::v-deep .export-load {
    top: -50% !important;
  }
  ::v-deep
    .el-select
    .el-select__tags
    > span
    > .el-tag.el-tag--info:nth-last-child(2) {
    max-width: 120px;
  }

  .dot-status {
    display: flex;
    align-items: center;
    width: max-content;
    margin: 0 auto;
  }
  .dot {
    margin-right: 4px;
    height: 16px;
    width: 16px;
    border-radius: 50%;
  }
  .dot1 {
    background: #1ad037;
  }
  .dot0 {
    background: #909399;
  }
  .dimission {
    color: red;
  }
  .black {
    color: black;
  }
</style>
